<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="请输入账号" prop="username">
        <el-input v-model="ruleForm.username" />
      </el-form-item>
      <el-form-item label="请输入密码" prop="password">
        <el-input type="password" v-model="ruleForm.password" />
      </el-form-item>
      
        <el-button type="warning" @click="deng()"  >登录</el-button>
        <el-button type="danger" @click="zhuce()">注册</el-button>




    </el-form>
  </template>
  
  <script  setup>
  import { login } from '@/api/login';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue'
import router from '@/router';
  

  
  const formSize = ref('default')
  const ruleFormRef = ref()
  const ruleForm = reactive({})
  
 
 
  
  const rules = reactive({
    username: [
      { required: true, message: '请输入账号', trigger: 'blur' },
      { min: 1 , message: '长度必须大于1位', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6,  message: '长度必须大于6位', trigger: 'blur' },
    ],
  })
//   登录
const aa=ref(0)
  function deng(){
    login(ruleForm).then(res=>{
        console.log(res);
        if(res.data.code==200){
            //清空token
            // clearToken()
             localStorage.setItem('token_key',res.data.msg)
        localStorage.setItem('id',res.data.data.id)
        localStorage.setItem('username',res.data.data.username)
        ElMessage.success('登录成功')
        router.push('/index')
    }else{
    ElMessage.error(res.data.msg)
    aa.value=res.data.data
        }
        
    })
  }
//   注册
function zhuce(){
    router.push('/zhuce')
}


  </script>
  